<script lang="ts">
import type { UseQueryReturnType } from '@peng_kai/kit/libs/vue-query';
import { getScrollParent } from '~/composables/useScrollParent';

type TQuerier = UseQueryReturnType<{
  pagination: {
    page: number;
    page_size: number;
    total?: number;
  };
} | null, Error>;
</script>

<script setup lang="ts">
const props = defineProps<{
  querier: TQuerier;
}>();
const page = defineModel('page', {
  default: 1,
  get() {
    return props.querier.data.value?.pagination.page;
  },
});

const $paginationWrapper = ref<HTMLDivElement>();
const [setEle, eleBp] = useElementBreakpoint({});
const pageSize = defineModel('pageSize', { default: 10 });
const total = computed(() => props.querier.data.value?.pagination.total ?? 0);
const disabled = computed(() => props.querier.isFetching.value);
const pageSizeOptions = [...(new Set([10, 20, 50, pageSize.value]).values())].sort().map(String);

function onChange() {
  setTimeout(() => {
    const parentEle = $paginationWrapper.value?.parentElement as HTMLElement;

    if (!parentEle)
      return;

    const parentEleReac = parentEle.getBoundingClientRect();
    const scrollableEle = getScrollParent(parentEle, document.documentElement);
    let top = parentEleReac.top;
    // 如果最近的可滚动元素是 html，则减掉页面 header 的高度
    top = scrollableEle === document.documentElement ? top - 70 : top;

    if (top < 0)
      scrollableEle.scrollBy({ top, behavior: 'smooth' });
  }, 100);
}
</script>

<template>
  <div
    :ref="(ele: any) => [setEle(ele), $paginationWrapper = ele]"
    class="flex" :class="[eleBp.lt2xl ? 'justify-center' : 'justify-end']"
  >
    <TAntdTheme component="Pagination" :token="{ controlHeight: 34 }">
      <APagination
        v-model:current="page" v-model:pageSize="pageSize" class="pagination"
        :disabled="disabled" :total="total" showSizeChanger
        :simple="eleBp.lt2xl" hideOnSinglePage :pageSizeOptions="pageSizeOptions"
        :showTotal="(total, range) => `${range[1]} / ${total}`"
        @change="onChange"
      />
    </TAntdTheme>
  </div>
</template>

<style lang="scss" scoped>
:deep(.pagination) {
  &.ant-pagination-simple {
    display: flex;
    align-items: center;
    height: 34px;

    .ant-pagination-prev,
    .ant-pagination-next {
      height: 100%;
      line-height: 34px;

      .ant-pagination-item-link {
        height: 100%;
      }
    }

    .ant-pagination-simple-pager {
      display: inline-flex;
      align-items: center;
      height: 100%;

      input {
        height: 100%;
        width: 50px;
      }
    }
  }

  .ant-pagination-total-text {
    // color: theme('colors.sys.text.body');
  }

  .ant-pagination-prev span {
    --uno: 'size-1.2em i-ion:chevron-down-outline rotate-90';
  }

  .ant-pagination-next span {
    --uno: 'size-1.2em i-ion:chevron-down-outline -rotate-90';
  }

  .ant-pagination-item {
    border: none;

    a {
      color: theme('colors.sys.text.body');
    }

    &.ant-pagination-item-active {
      background-color: #3e404c;

      a {
        color: #fff;
      }
    }
  }

  .ant-pagination-item-link {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 100%;

    svg {
      display: none;
    }
  }

  .ant-pagination-options {
    .ant-select-selector {
      height: 34px;
      background-color: #3e404c;

      .ant-select-selection-item {
        line-height: 32px;
      }
    }
  }
}
//
</style>
